<template>
  <van-tabbar v-model="active"
              active-color="#EC0D0D"
              inactive-color="#000">
    <van-tabbar-item icon="shop-o"
                     :to="{path:'/index/indexshow'}">首页</van-tabbar-item>
    <van-tabbar-item icon="play-circle-o"
                     :to="{path:'/shortVideo'}"
                     @click="toVideo">短视频</van-tabbar-item>
    <van-tabbar-item icon="bag-o"
                     :to="{path:'/index/classify'}">分类</van-tabbar-item>
    <van-tabbar-item icon="shopping-cart-o"
                     :to="{path:'/index/shopcar'}">购物车</van-tabbar-item>
    <van-tabbar-item icon="smile-o"
                     :to="{path:'/index/center'}">我的</van-tabbar-item>
  </van-tabbar>
</template>
<script>
export default {
  name: "Footer",
  data() {
    return {
      // active: 0,
    };
  },
  methods: {
    toVideo() {
      this.$store.state.isClickVideoIcon = true
    }
  },
  // created() {
  //   this.$store.commit('init',JSON.parse(localStorage.vuex))
  // },
  //利用计算属性  实现vuex中双向数据绑定
  computed: {
    active: {
      get() {
        return this.$store.state.active
      },
      set(value) {
        this.$store.commit('changeNav', value)
      }
    }
  }
}
</script>

<style lang="less" scoped>
van-tabbar {
  margin-top: 50px;
}
</style>